<script>
    // 库存账单的产品明细
    Vue.component('look-material-details', {
        template: `
<el-dialog title="材料明细" :visible.sync="dialogShow" width="1200px" @close="closeModal" style="min-height: 300px;">
 <div class="recordListBox">
    <el-card class="box-card" style="cursor: initial;">
        <div class="recordTable">
        <template>
        <el-table :data="recordList" border stripe  style="cursor: initial;" show-summary     :summary-method="getSummaries">
        <el-table-column type="index">
        </el-table-column>
        <el-table-column prop="product_title" label="产品名称">
        <template slot-scope="scope">
        <p>{{ scope.row['title'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="product_unit" label="单位">
        <template slot-scope="scope">
        <p>{{ scope.row['spec'] }}</p>
        </template>
        </el-table-column>
         <el-table-column prop="num" label="数量">
        <template slot-scope="scope">
        <p>{{ scope.row['num'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="cost_price" label="单价">
        <template slot-scope="scope">
        <p>{{ scope.row['cost_price'] }}</p>
        </template>
        </el-table-column>
        <el-table-column prop="money" label="总金额" sortable>
        <template slot-scope="scope">
        <p>{{ scope.row['money'] }}</p>
        </template>
        </el-table-column>
        </el-table>
        </template>
        </div>
        </el-card>
    </div>
</el-dialog>
    `,
        props: ['dialog-show', 'record-list'],
        computed: {
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally() {
                return this.$store.state.currentTally
            }
        },
        watch: {
            dialogShow:{
                handler (newVal) {},
                deep:true,
                immediate: true
            },
            recordList: {
                handler (newVal) {
                    this.recordList = newVal
                },
                deep:true,
                immediate: true
            }
        },
        data:function(){
            return {
                recordDialog:false,
                recordList:[],
            }
        },
        methods:{
            closeModal(){
                this.$emit('modalClose')
            },
            modalClose(){
                this.recordDialog = false
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                console.log(columns)
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '总计';
                        return;
                    }else if(index === 1 || index === 2 || index === 3 || index === 4) {
                        sums[index] = '-';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = 0;
                        values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                sums[index] = sums[index] + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        sums[index] = parseFloat(sums[index]).toFixed(2) ;
                    } else {
                        sums[index] = '';
                    }
                });
                return sums;
            },
        }
    })
</script>
